<!-- 
/**
 * 单元名称：SendRecord
 * 单元功能：资讯管理/发送记录
 * 所属模块功能：资讯管理/模板消息
 * 创建人：liang
 * 创建时间：231130
 * 修改人：
 * 修改时间：
 */
 -->
<template>
  <div style="height: 100%;">
    <m-page-list
        :option="option"
        :page="page"
        :total="total"
        :table-data="tableData"
        :table-loading="tableLoading"
        v-model:value="query"
        @col-btn-click="colBtnClick"
        @search-data="searchData"
    />
    <m-dialog-form ref="dialogRef" :data="dialogData" v-model:show="dialogShow" :option="dialogOption" @confirm="dialogConfirm" ></m-dialog-form>


    <!-- 重新发送弹窗 -->
    <el-dialog v-model="sendShow" title="重新发送" :close-on-click-modal="false" draggable ref="sendDiaRef">
      <el-scrollbar max-height="70vh">
        <el-form ref="sendFormRef" class="form-wrap" label-width="130" scroll-to-error :model="sendForm">
          <el-col :span="(item.col || 1) * 6" v-for="(item, i) in sendFieldList" :key="i" v-show="!item.hide">
            <el-form-item 
              :label="item.label"
              class="form-item-wrap"
              :prop="item.field_id"
              :rules="[{ required: item.required, message: item.requiredMsg || (item.label + '不能为空'), trigger: 'blur'}]"
            >
              <m-form-item :id="item.field_id" :field="item" v-bind="$attrs" :value="sValue[item.field_id]" @m-change.self="onSendChange"/>
            </el-form-item>
          </el-col>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onSendClose">取消</el-button>
          <el-button type="primary" @click="onSendConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref,reactive,onMounted,nextTick,watch ,onActivated} from 'vue'
import {onBeforeRouteLeave ,useRoute} from 'vue-router'
//组件
import MPageList from '@/components/PageList'
import MDialogForm from '@/components/DialogForm/DialogForm'
import MFormItem from '@/components/common/Form/FormItem'
//请求
import {getPassenger, addPassenger,editPassenger,delPassenger} from '@/request/api/basicData'

import {
  getAllServiceMessageTmplSendRec, getAllServiceMessageTmplSendRecListPage,
  getAllServiceMessageQueryTmplsendCustomers, postAllServiceMessageTmplSendSingle,
} from '@/request/api/wechatTweet'

import {usePageList} from "../../composables/pageList";
import {useRouteQuery} from "../../composables/routeQuery"

import { usePublicCompo, } from './composables/public'

const route = useRoute();

let opts = {
  auth_id: 'passengers',
  getApi: getDataPage,
  addApi:addPassenger,
  editApi: getDetlData,
  delApi:delPassenger,
  idKey: 'row_id',
  stopMounted: true
};
let {option,page,total,tableLoading,tableData,query,dialogRef,dialogShow,dialogData,dialogOption,
  colBtnClick,searchData,getDataList,dialogConfirm} = usePageList(opts);

useRouteQuery(onRouteQueryChange)
option.conditions = [
  { label: '开始日期',type: 'date',field_id: 'start_date', length: 'YYYY-MM-DD', col: 8},
  { label: '结束日期',type: 'date',field_id: 'end_date', length: 'YYYY-MM-DD', col: 8},
  { label: '发送结果',type: 'picklist',field_id: 'is_result',col: 8,options: [
    {name: '成功',id: '1'},
    {name: '失败',id: '0'},
  ]},
  // { label: '微信用户',type: 'text',field_id: 'open_id',col: 8},
  { label: '班车编号',type: 'text',field_id: 'shuttle_id',col: 8},
  { label: '客户名称',type: 'text',field_id: 'open_id',col: 8},
  { label: '客户手机',type: 'text',field_id: 'open_id',col: 8},
  { label: '信息编号',type: 'text',field_id: 'message_id',col: 24},
]
option.titleList = [
  { name: '模板消息', path: '/tmplmsg', },
  { name: '发送记录', path: '/sendrec', },
];
option.hLBtns = [];
option.colBtns = [
  // { title: '详情', id: 'detail', type: 'primary', event: onRowDetail, },
  { title: '重新发送', id: 'sendAgain', type: 'primary', event: onRowSend, },
];

option.cols = [
  { prop: 'row_id', label: '行号', },
  { prop: 'message_id', label: '信息编号', },
  // { prop: 'send_id', label: '发送编号', },
  { prop: 'title', label: '标题', },
  { prop: 'shuttle_id', label: '班车编号', },
  { prop: 'shuttle_name', label: '班车名称', },
  // { prop: 'open_id', label: '微信用户', },
  { prop: 'customer_name', label: '客户名称', },
  { prop: 'phone', label: '客户手机号', },
  { prop: 'is_result', label: '发送结果', },
  // { prop: 'request', label: '请求', },
  // { prop: 'response', label: '响应', },
  { prop: 'remark', label: '备注', },
  {prop: 'input_id',label: '录入员号' },
  {prop: 'input_name',label: '录入员名' },
  {prop: 'input_time',label: '录入时间' },
  {prop: 'modify_id',label: '修改员号' },
  {prop: 'modify_name',label: '修改员名' },
  {prop: 'modify_time',label: '修改时间' },
];
dialogOption.fieldList = [
  { field_id: 'customer_id', show_field: 'customer_id', label: '标题', type: 'text', col: 3, disabled: true, },
  { field_id: 'customer_name', show_field: 'customer_name', label: '备注', type: 'text', col: 3, disabled: true, },
  { field_id: 'is_result', show_field: 'is_result', label: '', type: 'text', col: 3, disabled: true, },
  { field_id: 'message_id', show_field: 'message_id', label: '', type: 'text', col: 3, disabled: true, },
  { field_id: 'message_row_id', show_field: 'message_row_id', label: '', type: 'text', col: 3, disabled: true, },
  { field_id: 'open_id', show_field: 'open_id', label: '', type: 'text', col: 3, disabled: true, },
  { field_id: 'phone', show_field: 'phone', label: '', type: 'text', col: 3, disabled: true, },
  { field_id: 'remark', show_field: 'remark', label: '', type: 'text', col: 3, disabled: true, },
  { field_id: 'request', show_field: 'request', label: '', type: 'text', col: 3, disabled: true, },
  { field_id: 'response', show_field: 'response', label: '', type: 'text', col: 3, disabled: true, },
  { field_id: 'send_id', show_field: 'send_id', label: '', type: 'text', col: 3, disabled: true, },
  { field_id: 'shuttle_id', show_field: 'shuttle_id', label: '', type: 'text', col: 3, disabled: true, },
  { field_id: 'shuttle_name', show_field: 'shuttle_name', label: '', type: 'text', col: 3, disabled: true, },
  { field_id: 'title', show_field: 'title', label: '标题', type: 'text', col: 3, disabled: true, },
];
dialogOption.center = 'center'

function onRouteQueryChange(routeQuery) {
  query.value = routeQuery;
  getDataList();
}


dialogConfirm = function() {
  dialogShow.value = false
}
let pageParams = {}
function getDataPage(d) {
  if(d) {
    pageParams = d
  } else {
    pageParams['page.no'] = 1
    d = pageParams
  }
  return new Promise(resolve => {
    let data = {
      ...d,
    }
    delete data['page.no']
    delete data['page.size']
    data.pagenumber = d['page.no']
    data.pagesize = d['page.size']
    getAllServiceMessageTmplSendRecListPage(data).then(res => {
      if(res?.errcode === 0) {
        console.log(res);
        res?.row.forEach(item => {
          item.is_result = item.is_result ? '成功' : '失败'
        })
      }
      resolve(res)
    })
  })
}
// 查看详情
function onRowDetail(scope, eventId) {
  let { row, } = scope
  getDetlData(row).then(res => {
    if(res.errcode !== 0) return
    let { row, } = res
    if(row[0]) dialogData.value = row[0]
    dialogShow.value = true
    dialogOption.title = '查看详情'
  })
}
// 重新发送
function onRowSend(scope, eventId) {
  let { row, } = scope

  sendShow.value = true
  let loadInst = null
  nextTick(() => {
    loadInst = ElLoading.service({
      target: sendDiaRef.value.$el.nextElementSibling.querySelector('.el-dialog'),
    })
  })
  getDetlData(row).then(res => {
    loadInst && loadInst.close()
    if(res.errcode !== 0) return
    let { row, } = res
    if(row[0]) {
      let obj = {
        ...row[0],
        members: row[0].open_id,
        row_id: row[0].message_row_id,
      }
      Object.keys(sendForm).forEach(key => {
        sendForm[key] = obj[key]
        sValue[key] = obj[key]
      })
    }
    
  })
}
// 查看详情接口
function getDetlData(row) {
  let { row_id, } = row
  return new Promise(resolve => {
    getAllServiceMessageTmplSendRec({
      row_id,
    }).then(res => {
      if(res.errcode === 0) {
        let { row, } = res
        if(row[0]) {
          
        }
      }
      resolve(res)
    })
  })
  
}

/*let routeQuery = ref(null);
watch(routeQuery,(val) =>{
  //路由参数变化触发方法
  console.log('路由参数变化',route.query);
  //页面条件赋值
  query.value = route.query;
  getDataList();
})
onBeforeRouteLeave(to => {
  //离开当前路由停止监听路由
  stopWatchRoute();
});
let stopWatchRoute = null;
onActivated(() => {
  //进入该页面监听路由变化
  stopWatchRoute = watch(() => route.fullPath,
    (newValue, oldValue) => {
      routeQuery.value = newValue
      console.log('路由参数变化',newValue);
      //页面条件赋值
      // query.value = route.query;
      // getDataList();
    },
    { immediate: true }
  )
})*/

// 重新发送
let sendShow = ref(false),
    sendLoading = ref(false),
    sendDiaRef = ref(null),
    sendFormRef = ref(null),
    sendForm = reactive({
      row_id: '',
      members: '',
      customer_name: '',
      phone: '',
    }),
    sValue = reactive({
      row_id: '',
      members: '',
      customer_name: '',
      phone: '',
    }),
    sendFieldList = reactive([
      // { field_id: 'title', show_field: 'title', label: '模板', type: 'text', col: 3, disabled: true, },
      // { field_id: 'title', show_field: 'title', label: '模板', type: 'text', col: 3, disabled: true, },
      { field_id: 'members', show_field: 'members', label: '客户', type: 'text', col: 3, disabled: true, hide: true, },
      { field_id: 'customer_name', show_field: 'customer_name', label: '客户名称', type: 'text', col: 3, disabled: true, },
      { field_id: 'phone', show_field: 'phone', label: '客户手机', type: 'text', col: 3, disabled: true, },
    ])
function onSendChange() {

}
function onSendClose() {
  sendShow.value = false
}
function onSendConfirm() {
  // sendLoading.value = true
  let post = {
    row_id: sendForm.row_id,
    members: sendForm.members,
  }
  let loadInst = ElLoading.service({
    target: sendDiaRef.value.$el.nextElementSibling.querySelector('.el-dialog'),
  })
  postAllServiceMessageTmplSendSingle(post).then(res => {
    loadInst.close()
    if(res.errcode !== 0) return
    ElMessage.success(`操作成功！`)
    onSendClose()
    getDataList()
    sendForm.row_id = ''
  })
}

</script>

<style scoped>

</style>
